<template>
  <div
    class="border-solid border-2 border-blue-500 rounded p-1"
    :class="{ spNode: treeNodeData.level > 1 }"
    ref="treeNodeRef"
    :style="{ minHeight: `${parentNode ? parentNode.minHeight : 0}px` }"
  >
    <div @click="() => onClickNodeTitle(treeNodeData)">{{ treeNodeData.level }}-{{ treeNodeData.title }}</div>
    <div v-if="treeNodeData.hasChildren" class="bg-red-100 text-center cursor-pointer">+</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs } from 'vue'
import { OrgTreeNodeDataInner } from './typing'
const props = defineProps<{
  treeNodeData: OrgTreeNodeDataInner
  parentNode?: OrgTreeNodeDataInner
}>()
const { treeNodeData, parentNode } = toRefs(props)
const treeNodeRef = ref()
onMounted(() => {
  const treeNodeDom = treeNodeRef.value
  console.log(treeNodeData.value.title, treeNodeDom.offsetHeight)
  if (parentNode.value && parentNode.value.minHeight < treeNodeDom.offsetHeight) {
    // console.log(treeNodeData.value.title, parentNode.value.minHeight, treeNodeDom.clientHeight)
    parentNode.value.minHeight = treeNodeDom.offsetHeight
  }
})
</script>
<style lang="scss" scoped>
.border-solid {
  border-style: solid;
}
.border-2 {
  border-width: 2px;
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.rounded {
  border-radius: 0.25rem /* 4px */;
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.text-center {
  text-align: center;
}
.cursor-pointer {
  cursor: pointer;
}
.spNode {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
</style>
